<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>新增收货地址</title>
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<link rel="stylesheet" type="text/css" href="../../css/picker.css" />
<style>
body{
	background: #F3F6F8;
}
.addrBox{
	background: #fff;
	padding: 0 1rem;
	margin-bottom: 0.8rem;
}
.comFlexItem textarea.textarea{
	height: 4.15rem;
	font-size: 0.7rem;
	padding-top: 0.1rem;
}
dl.align-start{
	padding-top: 0.6rem;
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
	align-items: flex-start;
}
dl.comFlexItem dt {
		width: 4rem;
		font-size: 0.7rem;
		color: #373336;
}
select,
input.input {
		font-size: 0.7rem;
		height: 2rem;
}
.comFlexItem select,
.comFlexItem input.input {
		text-align: left;
}
.aui-switch:checked{
	border-color: #e73350;
	background-color: #e73350;
}
.btmFix{
	position: fixed;
	width: 100%;
	padding: 0 0.75rem;
	bottom: 0.75rem;
}
body {
	background: none;
}
/*弹窗*/
.popBox{
	border-radius: 0.2rem;
}
.popBox.popBottom {
	left: 0.75rem;
	right: 0.75rem;
	bottom: 0.75rem;
}
.popBox .popHeader {
	position: relative;
	padding: 0 2.15rem;
	height: 2.25rem;
	line-height: 2.25rem;
	font-size: 0.75rem;
	color: #333;
	text-align: center;
}
.popBox.mid {
	top: 50%;
	left: 50%;
	width: 12.5rem;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.popBox .popFooter .saveBtn {
	height: 2.3rem;
	line-height: 2.3rem;
	text-align: center;
	font-size: 0.8rem;
}
.dateHead {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	padding: 0 10px;
	background: #f5f6fa;
	font-size: 0.6rem;
	line-height: 1.35rem;
	text-align: center;
	color: #999;
}
.dateHead li {
	-ms-flex: 1 1 1e-9px;
	-webkit-box-flex: 1;
	flex: 1;
	flex-basis: 1e-9px;
	width: 1%;
}
#picker_container {
	padding: 0.75rem 0;
}
.dateHead,
.picker .picker-panel .wheel-wrapper {
	padding: 0 5px;
}
.color-e7{
	color:#E73250 !important
}
.text-common{
	color:#E73250 !important

}
</style>
</head>
<body>
<div class="addrBox">
	<dl class="comFlexItem aui-border-b">
		<dt>收货人</dt>
		<dd class="flex-auto"><input type="text" name="" id="name" value="" placeholder="请输入姓名" class="input"></dd>
	</dl>
	<dl class="comFlexItem aui-border-b">
		<dt>手机号码</dt>
		<dd class="flex-auto"><input type="number" name="" id="phone" value="" placeholder="请输入手机号" class="input"></dd>
	</dl>
	<dl class="comFlexItem aui-border-b" tapmode onclick="address()">
		<dt>所在地区</dt>
		<dd class="flex-auto"><span class="color-999" id="prov">请选择</span></dd>
	</dl>
	<dl class="comFlexItem align-start">
		<dt>详细地址</dt>
		<dd class="flex-auto">
			<textarea class="textarea" name="name" id="address" rows="8" cols="80" placeholder="请输入详细地址">
		</textarea>
	</dd>
	</dl>
</div>
<div class="addrBox">
	<dl class="comFlexItem">
		<dt style="width:5rem">设为默认地址</dt>
		<dd class=""><input class="aui-switch" id="checkbox" type="checkbox" name="demo2"></dd>
	</dl>
</div>
<div class="btmFix">
	<div class="comBtmBtn radius" tapmode onClick="save()">保存地址</div>
</div>
<div class="cityMask aui-hide">
	<div class="popOverlay" tapmode onClick="closeCity();"></div>
	<div class="popBox mid">
		<div class="popHeader popTopBar">
			<div class="close" tapmode onClick="closeCity();"></div>
			<div class="text-dark aui-font-size-16" id="txt">所在地区</div>
		</div>
		<ul class="dateHead clearfix">
			<li>省</li>
			<li>市</li>
			<li>区</li>
		</ul>
		<div id="picker_container"></div>
		<div class="popFooter aui-border-t">
			<div class="saveBtn color-e7" tapmode onClick="saveCity();">确定</div>
		</div>
	</div>
</div>
</body>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/wx_import.js"></script>
<script type="text/javascript" src="../../script/wx_common.js"></script>
<script type="text/javascript" src="../../script/city.js"></script>
<script type="text/javascript" src="../../script/picker.js"></script>
<script type="text/javascript">
var addressId;
var postData = {};
// 城市选择弹框
var text1;
var text2;
var text3;
var txt;
var first = []; /* 省，直辖市 */
var second = []; /* 市 */
var third = []; /* 镇 */

var selectedIndex = [2, 2, 2]; /* 默认选中的地区 */

var checked = [0, 0, 0]; /* 已选选项 */
function address(){
	picker.show();
	$$('.cityMask').removeClass('aui-hide')
}
function closeCity(){
	$$('.cityMask').addClass('aui-hide');
}
function creatList(obj, list){
	obj.forEach(function(item, index, arr){
	var temp = new Object();
	temp.text = item.name;
	temp.value = index;
	list.push(temp);
	})
}

creatList(city, first);

if (city[selectedIndex[0]].hasOwnProperty('sub')) {
	creatList(city[selectedIndex[0]].sub, second);
} else {
	second = [{text: '', value: 0}];
}

if (city[selectedIndex[0]].sub[selectedIndex[1]].hasOwnProperty('sub')) {
	creatList(city[selectedIndex[0]].sub[selectedIndex[1]].sub, third);
} else {
	third = [{text: '', value: 0}];
}

var picker = new Picker({
	data: [first, second, third],
		selectedIndex: selectedIndex,
	title: '',
	container: 'picker_container'
});
$$('.wheel-wrapper > .wheel').each(function(){
	$$(this).find('.wheel-item').removeClass('text-common').eq(2).addClass('text-common');
})
picker.on('picker.select', function (selectedVal, selectedIndex) {
	text1 = first[selectedIndex[0]].text;
	text2 = second[selectedIndex[1]].text;
	text3 = third[selectedIndex[2]] ? third[selectedIndex[2]].text : '';
	txt = text1 + ' ' + text2 + ' ' + text3;
});

picker.on('picker.change', function (index, selectedIndex) {
	if (index === 0){
		firstChange();
		$$('.wheel-wrapper > .wheel').eq(0).find('.wheel-item').removeClass('text-common').eq(selectedIndex).addClass('text-common');
		$$('.wheel-wrapper > .wheel').eq(1).find('.wheel-item').removeClass('text-common').eq(0).addClass('text-common');
		$$('.wheel-wrapper > .wheel').eq(2).find('.wheel-item').removeClass('text-common').eq(0).addClass('text-common');
	} else if (index === 1) {
		secondChange();
		$$('.wheel-wrapper > .wheel').eq(1).find('.wheel-item').removeClass('text-common').eq(selectedIndex).addClass('text-common');
		$$('.wheel-wrapper > .wheel').eq(2).find('.wheel-item').removeClass('text-common').eq(0).addClass('text-common');
	}else{
	$$('.wheel-wrapper > .wheel').eq(2).find('.wheel-item').removeClass('text-common').eq(selectedIndex).addClass('text-common');
	}

	function firstChange() {
		second = [];
		third = [];
		checked[0] = selectedIndex;
		var firstCity = city[selectedIndex];
		if (firstCity.hasOwnProperty('sub')) {
			creatList(firstCity.sub, second);

			var secondCity = city[selectedIndex].sub[0]
			if (secondCity.hasOwnProperty('sub')) {
				creatList(secondCity.sub, third);
			} else {
				third = [{text: '', value: 0}];
				checked[2] = 0;
			}
		} else {
			second = [{text: '', value: 0}];
			third = [{text: '', value: 0}];
			checked[1] = 0;
			checked[2] = 0;
		}

		picker.refillColumn(1, second);
		picker.refillColumn(2, third);
		picker.scrollColumn(1, 0)
		picker.scrollColumn(2, 0)
	}

	function secondChange() {
		third = [];
		checked[1] = selectedIndex;
		var first_index = checked[0];
		if (city[first_index].sub[selectedIndex].hasOwnProperty('sub')) {
			var secondCity = city[first_index].sub[selectedIndex];
			creatList(secondCity.sub, third);
			picker.refillColumn(2, third);
			picker.scrollColumn(2, 0)
		} else {
			third = [{text: '', value: 0}];
			checked[2] = 0;
			picker.refillColumn(2, third);
			picker.scrollColumn(2, 0)
		}
	}

});
function saveCity(){
	$$('.picker-choose .confirm').trigger('click');
	$$('#prov').text(txt);
	if(txt){
		$$('#prov').removeClass('color-999')
	}
		closeCity();
}


// apiready = function(){
	// api.parseTapmode();
	var newAddr = getUrlParamValue('newAddr');
	var editAddr = getUrlParamValue('newAddr');
	var addressId = getUrlParamValue('itemId');
	if(newAddr == '新增收货地址'){
		$$('.input').val('');
		$$('.textarea').val('')
		$('title').text('新增收货地址')
	}else{
		$('title').text('编辑收货地址')

	}
	if(addressId){
		getInfo()
	}
	// api.addEventListener({
	// 		name: 'cityEvent'
	// }, function(ret, err){
	// 		if( ret ){
	// 			text1 = ret.value.text1;
	// 			text2 = ret.value.text2;
	// 			text3 = ret.value.text3;
	// 		}else{
	// 				 alert( JSON.stringify( err ) );
	// 		}
	// });
//返回数据更改
function changeData(city){
	$$('#prov').text(city);
	if(city){
		$$('#prov').removeClass('color-999');
	}
}
// function address(){
// 	api.openFrame({
// 		name: 'city_mask',
// 		url: 'city_mask.html',
// 		rect: {
// 			x: 0,
// 			y: 0,
// 			w: 'auto',
// 			h: 'auto'
// 		},
// 		pageParam: {
// 			wname: api.winName,
// 			fname: api.frameName
// 		}
// 	});
// }
function getInfo(){
	$.ajax({
		url: BASE_URL + 'App/User/addressDetail',
		type: 'post',
		data: {
				address_id: addressId
		},
	success: function(ret, err){
		if (ret) {
			if(ret.code == 1){
				console.log(JSON.stringify(ret))
				$$('#name').val(ret.data.address_username);
				$$('#phone').val(ret.data.address_phone);
				$$('#address').val(ret.data.address_detail);
				$$('#prov').text(ret.data.address_prov + '' +ret.data.address_city + '' +ret.data.address_district);
				text1 = ret.data.address_prov;
				text2 = ret.data.address_city;
				text3 = ret.data.address_district;
				if(ret.data.address_prov){
					$$('#prov').removeClass('color-999')
				}
				if(ret.data.address_default == 1){
					document.querySelector("input.aui-switch").checked = true
				}
			}
		}
	}
	});
}
var defaul;
document.querySelector("input.aui-switch").addEventListener('click', function(){
	if (document.querySelector("input.aui-switch").checked) {
		defaul = 1
	}
});
var reg = /(^0{0,1}1[3|4|5|6|7|8|9][0-9]{9}$$)/;
function save(){
	var name = $$('#name').val();
	var phone = $$('#phone').val();
	var prov = $$('#prov').text();
	var addr = $$('#address').val();
	if(name.length < 2 || name == ''){
		toast('名字不可小于两个字');
		return false;
	}
	if(!reg.test(phone)){
		toast('手机号格式错误')
		return false;
	}
	if(!text1){
		toast('请输入地址')
		return false;
	}
	if(!addr){
		toast('请输入详细地址')
		return false;
	}
	postData.username = name;
	postData.mobile = phone;
	postData.address_prov = text1;
	postData.address_city = text2;
	postData.address_district = text3;
	postData.address_detail = addr;
	postData.default = defaul;
	console.log(JSON.stringify(postData))
	if(addressId){
		console.log(1)
		edit();
	}else{
		add();
	}
}
function add(){
	postData.userid = $api.getStorage('userid');
	$.ajax({
		url: BASE_URL + 'App/User/addAddress',
		type: 'post',
		data:  postData,
	success: function(ret, err){
		if (ret) {
			if(ret.code == 1){
				toast("添加成功");
				// api.execScript({
				// 	name: 'address_win',
				// 	frameName: 'address_frm',
				// 	script: 'getAdrList();'
				// });
				setTimeout(function(){
					window.history.go(-1)
				},1000);
			}else{
				// toast(ret.msg);
			}
		}
	}
	});
}
function edit(){
	postData.userid = $api.getStorage('userid');
	postData.address_id = addressId;
	console.log(JSON.stringify(postData))
	$.ajax({
		url: BASE_URL + 'App/User/editAddress',
		type: 'post',
		data: postData,
	success: function(ret, err){
		if (ret) {
			if(ret.code == 1){
				toast("修改成功");
				// api.execScript({
				// 	name: 'address_win',
				// 	frameName: 'address_frm',
				// 	script: 'getAdrList();'
				// });
				setTimeout(function(){
					window.history.go(-1)
				},1000);
			}else{
				// toast(ret.msg);
			}
		}
	}
	});
}
</script>
</html>
